<template>
  <div>
    <ul>
      <li v-for="item in friendList" :key="item.id">
        <div class="avatar"><img :src="item.avatar" /></div>
        <div class="content">
          <h2>{{ item.name }}</h2>
        </div>
        <div class="timestamp">
          <el-button class="friend_button" type="primary">发消息</el-button>
          <el-button
            @click="cancelAndTop(item)"
            class="friend_button"
            type="success"
            >{{ item.isTop == 0 ? "置顶" : "取消置顶" }}</el-button
          >
          <el-button
            @click="delFriends(item.id)"
            class="friend_button"
            type="danger"
            >删除</el-button
          >
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import { qeuryFriend, isAndTop, delFriend } from "@/api/social/friend";

export default {
  name: "Friend",

  data() {
    return {
      friendList: [],
      updateTop: {
        yId: undefined,
        isTop: undefined,
      },
    };
  },

  mounted() {},

  methods: {
    delFriends(id) {
      let that = this;
      this.$confirm("是否确认该操作", "提示", {
        iconClass: "el-icon-question", //自定义图标样式
        confirmButtonText: "确认", //确认按钮文字更换
        cancelButtonText: "取消", //取消按钮文字更换
        showClose: true, //是否显示右上角关闭按钮
        type: "warning", //提示类型  success/info/warning/error
      })
        .then(function () {
          
          delFriend(id).then((response) => {
            if (response.code == 200) {
              that.$message.success("删除好友成功");
              that.getFriend();
            }
          });
        })
        .then((data) => {
          //取消操作
        })
        .catch(function (err) {
          //捕获异常
        });
    },
    getFriend() {
      qeuryFriend().then((response) => {
        this.friendList = response;
      });
    },
    cancelAndTop(data) {
      this.updateTop.yId = data.id;
      this.updateTop.isTop = data.isTop;
      isAndTop(this.updateTop).then((response) => {
        this.getFriend();
      });
    },
  },
  created() {
    this.getFriend();
  },
};
</script>

<style lang="scss" scoped>
.friend_button {
  width: 100px;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  display: flex;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #eee;
}

.avatar {
  margin-right: 30px;
}

.avatar img {
  width: 100px;
  height: 100px;
  border-radius: 10%;
}

.content {
  flex-grow: 1;
}

.content h2 {
  font-size: 18px;
  margin: 0;
}

.content p {
  font-size: 14px;
  color: #888;
  margin: 5px 0 0 0;
}

.timestamp {
  font-size: 12px;
  color: #bbb;
}
</style>